<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <script src="./fontawesome/js/all.min.js"></script>

    <style>
      div {
        border: solid;
      }
    </style>
  </head>
  <body>
    <button type="button" data-abc="add" class="btn btn-primary">
      <i class="fa-solid fa-magnifying-glass"></i> Primary
    </button>
    <button type="button" data-action="save" class="btn btn-primary">
      <i class="fa-solid fa-house"></i> Primary
    </button>

    <button data-action="del">del</button>

    <script type="module">
      import PocketBase from "./js/pocketbase.es.js";

      const pb = new PocketBase("http://127.0.0.1:8090");

      function on(event, methods, act = "action") {
        document.addEventListener(event, function (e) {
          const action = e.target.dataset[act];
          if (action === undefined || methods[action] === undefined) return;
          methods[action].call(e.target);
        });
      }

      on(
        "click",
        {
          add() {
            console.log(this);
            console.log("add");
          },
          save() {
            console.log("save");
          },
          del() {
            console.log("del");
          },
        },
        "abc"
      );

      on("click", {
        add() {
          console.log(this);
          console.log("add");
        },
        save() {
          pb.collection("users")
            .getList()
            .then((data) => {
              console.log(data.items);
            })
            .catch((err) => {
              console.log(err);
            });
          console.log("save");
        },
        del() {
          console.log("del");
        },
      });
    </script>
  </body>
</html>
